<template>
  <div class="regiser contentHeight">
    <div class="registerBox contentBox">
      <el-form>
        <div class="registerImg"></div>
        <div class="loginImg"></div>
        <el-input
          placeholder="账号     4-12位字母数字_-组合"
          v-model="registerName"
          class="registerName"
          :class="[
            checkBln.registerName === ''
              ? ''
              : checkBln.registerName
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('registerName')"
          ref="inpFocus"
        ></el-input>
        <el-input
          placeholder="密码     6-18位字母数字@_-.组合"
          v-model="registerPassword"
          show-password
          :class="[
            checkBln.registerPsw === ''
              ? ''
              : checkBln.registerPsw
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('registerPsw')"
        ></el-input>
        <el-input
          placeholder="确认密码"
          v-model="registercomPassword"
          show-password
          class="registercomPsw"
          :class="[
            checkBln.registercomPsw === ''
              ? ''
              : checkBln.registercomPsw
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('registercomPsw')"
        ></el-input>
        <el-input
          placeholder="注册邮箱"
          v-model="email"
          :class="[
            checkBln.email === ''
              ? ''
              : checkBln.email
              ? 'successBorder'
              : 'failBorder',
          ]"
          @change="checkInput('email')"
        ></el-input>
        <div class="emailCodeBox">
          <el-input
            placeholder="邮箱验证码"
            v-model="verCode"
            class="verCode"
            :class="[
              checkBln.verCode === ''
                ? ''
                : checkBln.verCode
                ? 'successBorder'
                : 'failBorder',
            ]"
            @change="checkInput('verCode')"
          ></el-input>
          <el-button
            :disabled="verCodeBtn"
            class="verCodeBtn"
            :class="{ canVerCodeBtn: !verCodeBtn }"
            @click="getCode"
            >获取验证码</el-button
          >
        </div>
        <el-button
          :disabled="registerBtnBln"
          class="registerBtn"
          :class="{ canRegisterBtn: !registerBtnBln }"
          @click="register"
          >注册</el-button
        >
        <div class="toLoginBox">
          <router-link to="/login">立即登录</router-link>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import contentHeight from "../../public/js/contentHeight.js";
import checkRegexp from "../../public/js/checkRegexp.js";
import SnowflakeCursor from "../../public/js/snowflakeCursor.js";

export default {
  inject: ["reload"],
  data() {
    return {
      registerBtnBln: true, //注册按钮的disabled
      verCodeBtn: true, //获取验证码的disabled
      registerName: "", //注册账号
      registerPassword: "", //注册密码
      registercomPassword: "", //注册密码确认
      email: "", //注册邮箱
      verCode: "", //邮箱验证码
      checkBln: {
        //输入框检验布尔值
        registerName: "",
        registerPsw: "",
        registercomPsw: "",
        email: "",
        verCode: "",
      },
    };
  },
  created() {
    this.$nextTick(() => {
      // 获取高度
      contentHeight();
      // 渲染雪花
      new SnowflakeCursor({
        size: "20px",
        color: "#f1f1f1",
      });
    });
  },
  methods: {
    // 校验input框
    checkInput(type) {
      switch (type) {
        // 注册账号
        case "registerName":
          this.$set(
            this.checkBln,
            type,
            checkRegexp("name", this.registerName)
          );
          break;
        // 注册密码
        case "registerPsw":
          this.$set(
            this.checkBln,
            type,
            checkRegexp("password", this.registerPassword)
          );
          break;
        // 确认密码
        case "registercomPsw":
          // 判断条件  注册密码验证正确后判断两者是否一致，否则为false
          let res_registercomPsw = this.checkBln.registerPsw
            ? this.registerPassword === this.registercomPassword
            : false;
          this.$set(this.checkBln, type, res_registercomPsw);
          break;
        // 注册邮箱
        case "email":
          this.$set(this.checkBln, type, checkRegexp("email", this.email));
          this.checkVerCodeBtn();
          break;
        // 邮箱验证码
        case "verCode":
          // 具体后台验证 6位长度  前台判断长度为6即可
          let res_verCode = this.verCode.length == 6;
          this.$set(this.checkBln, type, res_verCode);
          break;
      }
      this.checkRegisterBtn();
    },
    // 检验能否点击获取邮箱验证码按钮
    checkVerCodeBtn() {
      // 邮箱验证正确即可获取验证码
      if (this.checkBln.email) {
        this.verCodeBtn = false;
      }
    },
    // 检验能否点击注册按钮
    checkRegisterBtn() {
      if (
        this.checkBln.registerName &&
        this.checkBln.registerPsw &&
        this.checkBln.registercomPsw &&
        this.checkBln.email &&
        this.checkBln.verCode
      ) {
        this.registerBtnBln = false;
      }
    },
    // 获取邮箱验证码
    getCode() {
      this.verCodeBtn = true;
      // 发送获取验证码请求
      this.axios
        .get("/getCode", {
          params: {
            email: this.email,
          },
        })
        .then((res) => {
          let result = res.data.data;
          if (result.status == 1) {
            // 获取成功
            this.$message({
              message: result.message,
              type: "success",
              showClose: true,
              duration: 1500,
            });
          } else {
            // 获取失败
            this.$message({
              message: result.message,
              type: "error",
              showClose: true,
              duration: 1500,
            });
            // 邮箱变红框
            this.$set(this.checkBln, "email", false);
          }
        });
    },
    // 注册
    register() {
      this.registerBtnBln = true;
      // 发送注册请求
      this.axios
        .post("/register", {
          registerName: this.registerName,
          registerPassword: this.registerPassword,
          email: this.email,
          verCode: this.verCode,
        })
        .then((res) => {
          let result = res.data.data;
          if (result.status == 1) {
            // 注册成功
            this.$message({
              message: result.message,
              type: "success",
              showClose: true,
              duration: 1500,
            });
            // 跳转登陆页
            this.$router.push("/login");
          } else {
            // 登录失败
            this.$message({
              message: result.message,
              type: "error",
              showClose: true,
              duration: 1500,
            });
            // 刷新页面
            this.reload();
          }
        });
    },
  },
  mounted() {
    // input自动获取焦点
    this.$refs.inpFocus.focus();
  },
  beforeDestroy() {
    this.$nextTick(() => {
      let showEle = document.getElementById("snowsBox");
      document.body.removeChild(showEle);
    });
  },
};
</script>
<style lang="less">
.regiser {
  width: 100%;
  background: url("../../public/img/login/register_bg_min.png") no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  // 注册盒子
  .registerBox {
    width: 360px;
    padding: 20px 50px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(
      230deg,
      rgba(175, 186, 247, 0) 0%,
      rgba(150, 196, 241, 0.425) 100%
    );
    box-shadow: 0px 0px 40px rgba(14, 56, 173, 0.7) inset;
    color: #f1fafa;
    // 图标
    .registerImg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: url("../../public/img/bigtree.png") no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
    }
    // 注册密码
    .registerName {
      margin: 15px 0;
    }
    // 确认密码
    .registercomPsw {
      margin: 15px 0;
    }
    // 邮箱验证码盒子
    .emailCodeBox {
      width: 100%;
      margin: 15px 0 25px;
      .verCode {
        width: 50%;
      }
      // 验证码按钮
      .verCodeBtn {
        margin-left: 68px;
        background: 0;
        border: 1px solid #dcdfe6;
        box-shadow: 0px 0px 20px #4884f3b3 inset;
      }
      .canVerCodeBtn {
        color: #67c23a;
        border: 1px solid #4884f3;
      }
    }
    // 注册按钮
    .registerBtn {
      display: block;
      width: 100px;
      height: 40px;
      margin: 0 auto;
      border: 0;
      background: 0;
      box-shadow: 0px 0px 20px rgba(72, 132, 243, 0.7) inset;
    }
    .canRegisterBtn {
      color: #67c23a;
      box-shadow: 0px 0px 20px rgba(103, 194, 58, 0.9) inset;
    }
    // 立即登录
    .toLoginBox {
      margin-top: 25px;
      font-size: 12px;
      text-align: center;
      color: #f1fafa;
      .line {
        display: inline-block;
        width: 1px;
        height: 16px;
        margin: 0 15px;
        background: #f1fafa;
        vertical-align: bottom;
      }
    }
    // 输入框背景色
    .el-input__inner {
      background: 0;
      color: #f1fafa;
    }
    // 输入框颜色 成功与失败
    .successBorder {
      .el-input__inner {
        border-color: #67c23a;
      }
    }
    .failBorder {
      .el-input__inner {
        border-color: #f56c6c;
      }
    }
  }
}
</style>